<template>
  <div class="intention">
    <mine-title>求职意向</mine-title>
    <div class="ico-box">
      <div>
        <span class="el-icon-scissors icon-s"></span>
        <p class="icon-title">PSD切图</p>
        <div class="icon-d">
          <p>快速从PSD文件中切出页面需要的图片</p>
          <p>制作利于页面优化的雪碧图</p>
        </div>
      </div>
      <div>
        <span class="el-icon-s-platform icon-s"></span>
        <p class="icon-title">网页制作</p>
        <div class="icon-d">
            
          <p>根据PSD效果图,深度还原需求</p>
          <p>html5语义化，css3动画新特性，JavaScript特效</p>
          
        </div>
      </div>

      <div>
        <span class="el-icon-mobile-phone icon-s"></span>
        <p class="icon-title">组件化开发</p>
        <div class="icon-d">
          <p>前端开发风格模块化，组件化</p>
          <p>vue技术栈，vue全家桶</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MineTitle from "../mine/Mine-title";

export default {
  name: "Mine-intention",
  components: {
    MineTitle,
  },
};
</script>

<style>
.intention {
  position: relative;
}
.ico-box {
  width: 1100px;
  height: 400px;
  /* background-color: #000; */
  z-index: 9;
  position: absolute;
  left: 50%;
  margin-left: -550px;
  top: 200px;
  justify-content: space-between;
  display: flex;
}
.ico-box > div {
  width: 310px;
  height: 400px;
  /* background-color: #fff; */
  position: relative;
}
.ico-box div .icon-s {
  font-size: 90px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -45px;
  top: 20%;
}
.ico-box div .icon-d {
  position: absolute;
  /* background-color: yellow; */
  width: 100%;
  height: 30%;
  bottom:10%;
}
.icon-title {
  display: block;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 45%;
  color: orange;
  font-size: 18px;
}
.icon-d{
    line-height: 30px;
    text-align: center;
    font-size: 16px;
    color: #333333;
}
</style>